<template>
  <div class="edu-page-warp">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="tab.label" :name="tab.name" v-for="tab in tabs" :key="tab.name">
      </el-tab-pane>
    </el-tabs>
    <div class="contain">
      <component :is="activeName"></component>
    </div>
  </div>
</template>
<script>
  import queryAuditStandard from './queryAuditStandard';
  import setProfessionalAuditStandard from './setProfessionalAuditStandard';
  import {
    getPower
  } from "common/src/api/culture/culturePlan";
  export default {
    data() {
      return {
        activeName: 'query-audit-standard',
        tabs: [{
          label: this.$t('auditStandard.queryAuditStandard'),
          name: 'query-audit-standard',
        }],
        role: ''
      }
    },
    components: {
      'query-audit-standard': resolve => require(['./queryAuditStandard.vue'], resolve),
      'set-professional-audit-standard': resolve => require(['./setProfessionalAuditStandard.vue'], resolve),
      'set-general-courses-standards': resolve => require(['./setGeneralCoursesStandard.vue'], resolve)
    },
    created() {
      this.getRole();
    },
    methods: {
      getRole() {
        getPower().then(res => {
          if (res && res.data) {
            this.role = res.data.power;
            if (this.role == 4) {
              this.tabs = [...this.tabs, ...[{
                  label: this.$t('auditStandard.setProfessionalAuditStandard'),
                  name: 'set-professional-audit-standard'
                },
                {
                  label: this.$t('auditStandard.setGeneralCoursesStandards'),
                  name: 'set-general-courses-standards',
                }
              ]]
            }
          }
        });
      }
    },
  }

</script>
<style scoped>
  ::v-deep .el-tabs__header {
    margin-bottom: 0;
  }

  .contain ::v-deep .el-card {
    margin-top: -1px;
    border-top: none;
  }

  .contain ::v-deep .el-table__body tr.current-row>td {
    background-color: #fff;
  }

</style>
